<template>
  <div class="container">
    <form class="form" @submit.prevent="saveForm">
      <h2 class="form-title">折旧信息录入</h2>
      <div class="form-item">
        <label for="method" class="label">折旧方法：</label>
        <select v-model="depreciationMethod" class="select" id="method">
          <option value="method1">平均年限法</option>
        </select>
      </div>
      <div class="form-item">
        <label for="rate" class="label">预计残值率：</label>
        <input v-model="residualValueRate" type="number" placeholder="请输入预计残值率" class="input" id="rate" min="0" step="0.01"> %
      </div>
      <div class="form-item">
        <label for="dateType" class="label">首次折旧时间：</label>
        <select v-model="depreciationTime" class="select" id="dateType">
          <option value="">请选择时间类型</option>
          <option value="month1">入库时间的当月</option>
          <option value="month2">入库时间的次月</option>
        </select>
      </div>
      <div class="form-item">
        <label for="remark" class="label">备注：</label>
        <textarea v-model="remark" rows="4" placeholder="请输入备注" class="textarea" id="remark"></textarea>
      </div>
      
      <div class="action">
        <button type="submit" class="button">保存</button>
      </div>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const depreciationMethod = ref('');
    const residualValueRate = ref('');
    const depreciationTime = ref('');
    const remark = ref('');

    const saveForm = () => {

      if (!depreciationMethod.value || 
          residualValueRate.value === '' || 
          !depreciationTime.value) {
        alert("请完整填写表单。");
        return;
      }
      alert("保存成功");
    };

    return {
      depreciationMethod,
      residualValueRate,
      depreciationTime,
      remark,
      saveForm
    };
  }
};
</script>

<style scoped>

.container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 600px;
  height: 500px;
  text-align: center;
}

h2 {
  padding-top: 50px;
}
.form-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #007bff;
}

.form-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.label {
  margin-right: 10px;
  font-weight: bold;
  width: 120px;
  color: #555;
}

.select, .input, .textarea {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.select {
  height: 40px; 
}

.input {
  width: auto; 
}

.textarea {
  resize: none;
}

.action {
  text-align: center;
  margin-top: 20px;
}

.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #0056b3;
}
</style>